<template>
  <div
    class="flex-1 data"
    data-selection-area
    @contextmenu.self="containerMenu"
  >
    <Toolbar></Toolbar>
    <div v-if="cloneList.length > 0" class="mt-8 px-8">
      <ul data-selection-area>
        <li
          v-for="(item, key) in cloneList"
          :key="key"
          v-dragEffect
          data-drag-effect
          :title="item.title"
          :class="{ active: selectedKey.has(item.id) }"
          :data-selection="item.id"
          draggable="true"
          @mousedown="selectItem(item)"
          @dblclick="open(item.id)"
          @contextmenu.stop="onContextmenu(item)"
          @drop="drop(item)"
          @dragstart="dragStart(item)"
          @dragover="dragover"
        >
          <div class="web-icon flex flex-s" @touchend="open(item.id)">
            <template v-if="item.type === 'file'">
              <img
                v-if="item.link"
                :src="getWebIcon(item.link)"
                draggable="false"
                class="w-70 h-70"
                @error="onError(item)"
              />
              <img v-else :src="google" class="w-80 h-80" />
            </template>
            <template v-else>
              <img :src="folder" width="36" />
            </template>
          </div>
          <div class="mt-8">
            <div v-if="item.editMode" class="web-title">
              <input
                v-model.lazy="item.title"
                v-selected
                v-focus
                placeholder="请输入标题"
                class="w-100 edit text-center"
                type="text"
                :data-id="item.id"
                @blur="update(item)"
                @keydown.enter="update(item)"
              />
            </div>
            <div v-else class="web-title">
              {{ item.title }}
            </div>
          </div>
        </li>
      </ul>
    </div>

    <div
      v-else
      class="flex flex-s h-100 flex-col"
      @contextmenu.self="containerMenu"
    >
      <img :src="logo" width="32" />
      <div class="mt-12 text-666"> 没有任何内容 </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { cloneList, currentFolder, getWebIcon, targetKey } from '@/views/bus';
  import folder from '@/assets/images/folder.png';
  import logo from '@/assets/images/logo.png';
  import google from '@/assets/images/google.png';
  import { ref } from 'vue';
  import { Folder } from '@/types/global';
  import {
    selectedKey,
    open,
    onContextmenu,
    update,
    containerMenu,
  } from './bus';
  import Toolbar from './toolbar/Toolbar.vue';
  import { dragover, dragStart, drop } from './drag';

  const selectItem = (item: Folder) => {
    if (selectedKey.value.size <= 1) {
      selectedKey.value.clear();
      if (selectedKey.value.has(item.id)) {
        selectedKey.value.delete(item.id);
      } else {
        selectedKey.value.add(item.id);
      }
    }

    targetKey.value = 'fileKey';
  };
  const onError = (item: Folder) => {
    item.link = undefined;
  };
</script>

<style lang="scss" scoped>
  @import './style';
</style>
